import 'dart:async';
import 'package:audioplayers/audioplayers.dart';
import 'package:dailyEn/detail.dart';
import 'package:dailyEn/new_detail.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter/services.dart';
import 'package:flutter/material.dart';
import 'package:dailyEn/global.dart';
import 'package:dailyEn/api.dart';
import 'dart:ui';
import 'package:flutter_html/flutter_html.dart';
import 'package:flutter_html/style.dart';

class NewsListPage extends StatefulWidget {
  NewsListPage({Key key}) : super(key: key);
  @override
  _NewsListPageState createState() => _NewsListPageState();
}

class _NewsListPageState extends State<NewsListPage> {
  List _list = [];
  int _page = 134;
  @override
  void initState() {
    getData();
    super.initState();
  }

  getData() async {
    setState(() => {_list = []});
    var res = await newList(_page);
    setState(() => {_list = res});
  }

  List<Widget> renderList(data) {
    List<Widget> list = [];
    for (var i = 0; i < data.length; i++) {
      var item = data[i];
      list.add(
        InkWell(
          onTap: () {
            Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) => NewsDetailPage(id: item['id']),
              ),
            );
          },
          child: Container(
              width: MediaQuery.of(context).size.width,
              margin: EdgeInsets.all(10),
              padding: EdgeInsets.all(10),
              decoration: BoxDecoration(
                color: Global.backgroundColor,
                boxShadow: [
                  BoxShadow(
                    color: Colors.black.withOpacity(0.08),
                    offset: Offset(0, 0),
                    blurRadius: 10,
                    spreadRadius: 1,
                  )
                ],
                borderRadius: BorderRadius.circular(7),
              ),
              child: Row(
                children: [
                  Container(
                    width: 70,
                    child: Image.network(item['cover']),
                  ),
                  SizedBox(width: 10),
                  Expanded(
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Text(
                              item['title'][0],
                              style: TextStyle(
                                color: Global.fontSecondColor,
                                fontSize: 13,
                                fontWeight: FontWeight.w600,
                                fontFamily: 'SarasaMonoSCItalic',
                              ),
                            ),
                            Text(
                              item['date'],
                              style: TextStyle(
                                color: Global.fontSecondColor,
                                fontSize: 11,
                                fontWeight: FontWeight.w600,
                                fontFamily: 'SarasaMonoSCItalic',
                              ),
                            ),
                          ],
                        ),
                        SizedBox(height: 15),
                        Text(
                          item['title'][1],
                          style: TextStyle(
                            color: Global.fontColor,
                            fontSize: 17,
                            fontWeight: FontWeight.w400,
                            fontFamily: 'SarasaMonoSCItalic',
                          ),
                        ),
                      ],
                    ),
                  )
                ],
              )),
        ),
      );
    }

    list.add(
      Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Offstage(
            offstage: _page == 134,
            child: RaisedButton.icon(
              padding: EdgeInsets.fromLTRB(15, 5, 15, 5),
              color: Global.backgroundColor,
              elevation: 1,
              icon: Icon(
                Icons.arrow_back,
                color: Global.fontColor.withOpacity(.6),
                size: 24,
              ),
              label: Text(
                '上一页',
                style: TextStyle(
                  color: Global.fontColor.withOpacity(.6),
                  fontSize: 17,
                ),
              ),
              onPressed: () {
                setState(() {
                  _page++;
                  getData();
                });
              },
            ),
          ),
          RaisedButton.icon(
            padding: EdgeInsets.fromLTRB(15, 5, 15, 5),
            color: Global.backgroundColor,
            elevation: 1,
            icon: Icon(
              Icons.arrow_forward,
              color: Global.fontColor.withOpacity(.6),
              size: 24,
            ),
            label: Text(
              '下一页',
              style: TextStyle(
                color: Global.fontColor.withOpacity(.6),
                fontSize: 17,
              ),
            ),
            onPressed: () {
              setState(() {
                _page--;
                getData();
              });
            },
          ),
        ],
      ),
    );
    list.add(SizedBox(height: 20));
    return list;
  }

  @override
  Widget build(BuildContext context) {
    return _list.length == 0
        ? Container(
            color: Global.backgroundColor,
            child: Center(
              child: CircularProgressIndicator(
                backgroundColor: Global.backgroundColor,
                valueColor: AlwaysStoppedAnimation<Color>(Global.fontColor),
              ),
            ),
          )
        : Container(
            width: MediaQuery.of(context).size.width,
            height: MediaQuery.of(context).size.height,
            decoration: BoxDecoration(
              color: Global.backgroundColor,
            ),
            child: SingleChildScrollView(
              child: Column(
                children: renderList(_list),
              ),
            ),
          );
  }
}
